<template>
  <div class="mask" :style="{ height: maskHeight + 'px'}">
    <div class="alert">
      <div class="alert-body">{{ content }}</div>
      <div class="alert-footer" @click="handleConfirmClick">{{ $t('alert.confirm') }}</div>
    </div>
  </div>
</template>

<script>


export default {
  name: "Alert",
  props: {
    content: {
      type: String,
      default: '提示内容'
    },
    alertKey: {
      type: String,
      default: ''
    }
  },
  computed: {
    maskHeight() {
      if (process.client) {
        return document.body.clientHeight - 70
      }
    }
  },
  beforeMount() {
    // 获取原来的scrollTop 并将body的top修改为对应的值
    this.prevBodyStyle_scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    this.prevBodyStyle_top = window.getComputedStyle(document.body, null).getPropertyValue('top')
    document.body.style.top = `-${this.prevBodyStyle_scrollTop}px`
    // 获取原来body的position 为了解决iOS上光标漂移的问题 将position修改为fixed
    this.prevBodyStyle_position = window.getComputedStyle(document.body, null).getPropertyValue('position')
    document.body.style.position = 'fixed'
    // 为了避免width空值的情况
    this.prevBodyStyle_width = window.getComputedStyle(document.body, null).getPropertyValue('width')
    document.body.style.width = '100%'
  },
  beforeDestroy() {
    document.body.style.top = this.prevBodyStyle_top || '0px'
    document.body.style.position = this.prevBodyStyle_position
    document.body.style.width = '100%'
    document.body.scrollTop = document.documentElement.scrollTop = this.prevBodyStyle_scrollTop || 0
  },
  methods: {
    handleConfirmClick () {
      this.$emit('ok',this.alertKey)
    }
  }
}
</script>

<style scoped>
.mask {
  width: 100%;
  position: fixed;
  left: 0;
  top: 70px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alert {
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.alert-body {
  padding: 28px 56px;
  box-sizing: border-box;
  background-color: #7C7C7C;
  border-bottom: 1px solid white;
  width: 400px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  text-align: center;
}
.alert-footer {
  width: 400px;
  height: 48px;
  background-color: #7C7C7C;
  line-height: 48px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  cursor: pointer;
}
</style>
